<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>聊天记录</title>
<link rel="stylesheet" href="/public/static/layui/css/layui.css">
<style>
body .layim-chat-main {
	height: auto;
}
</style>
</head>
<body>
<div class="layim-chat-main">
  <ul id="LAY_view">
  </ul>
</div>
<div id="LAY_page" style="margin: 0 10px;"></div>
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine chat-list"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li class="layim-chat-he chat-list"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>
<script type="text/javascript" src="/public/static/js/core/jquery.min.js"></script> 
<script src="/public/static/layui/layui.js"></script> 
<script>
layui.use(['layim', 'flow'], function() {
    var layim = layui.layim,
        layer = layui.layer,
        laytpl = layui.laytpl,
        $ = layui.jquery,
        flow = layui.flow;
    var param = location.search
    let index = layer.msg("请稍候,正在加载数据...");
    var uid = param.split("?id=")[1].split('&')[0];
    flow.load({
        elem: '#LAY_page',
        isAuto: false,
        done: function(page, next) {
            var lis = [];
            $.get("/index.php/index.php/index/wxapp.layim/get_more_msg.html?rows=40&uid=" + uid + "&page=" + page, function(res) {
                layer.close(index);
                if (res.code == 0) {
                    var datas = [];
                    res.data.forEach(function(rs) {
                        datas.push({
                            username: rs.from_username,
                            id: rs.uid,
                            avatar: rs.from_icon,
                            timestamp: rs.full_time * 1000,
                            content: rs.content
                        });
                        lis.push('<li></li>');
                    });
                    var html = laytpl(LAY_tpl.value).render({
                        data: datas
                    });
                    $('#LAY_view').append(html);
                } else {
                    layer.msg('没有任何聊天记录!');
                }
                next(lis.join(''), page < res.paginate.pages);
            });
        }
    });
});
</script>
</body>
</html>
